import React, { Component } from 'react'
import './messageboard.css'
import { Comment, List, Pagination } from 'antd';
import { FrownOutlined, } from '@ant-design/icons';
// import moment from 'moment';

import { connect } from 'react-redux'
import * as action from '../../store/modules/action'
import { bindActionCreators, Dispatch } from 'redux'
import { Items } from '../../type/router';

// import { debounce } from 'lodash'
import { RouteComponentProps } from 'react-router-dom'

type Props = {
  getData(): void
  data: Array<Items>,
  pageData: Array<Items>,
  PagData(data: any): void,
}

type State = {}

class index extends Component<Props & RouteComponentProps, State> {
  state = {}

  componentDidMount() {
    this.props.getData()
  }

  // 分页切换数据
  setTable(page: number, pageSize: number) {
    console.log(page, pageSize);

    let data = [];
    data = this.props.data.slice((page - 1) * pageSize, page * pageSize)
    this.props.PagData(data)
  }
  // 跳转详情
  goDetail(item: Items) {
    this.props.history.push({ pathname: `/detail/${item.id}`, state: item })
  }

  // 手动封装防抖
  // debounce(fn: any, time: number) {
  //   let timeout: any = null
  //   return function () {
  //     clearTimeout(timeout)
  //     timeout = setTimeout(() => {
  //       fn()
  //     }, time)
  //   }
  // }

  render() {
    // console.log(this.props.data);

    return (
      <div className='MessWrap'>
        <div className="MessTop">
          <ul>
            <li><h2>留言板</h2></li>
            <li>
              <h4>
                <span>[请勿灌水]</span>
                <br />
                <span>[垃圾评论过多，欢迎提供好的过滤（标记）算法]</span>
              </h4>
            </li>
          </ul>
        </div>

        <div className="MessMain">
          {/* 评论 */}
          <div className="comment">
            <p>评论</p>
            {/* 评论框 */}
            <div className='CommentBox'>
              <div className="CommentBoxs">
                <textarea >请输入评论内容（支持Markerdown）</textarea>
                <div className="commentBoxs">
                  <span>表情  <FrownOutlined /></span>
                  <button>发布</button>
                </div>
              </div>
            </div>
            {/* 评论内容 */}
            <List
              className="comment-list"
              header={`${this.props.data.length} 回复`}  // 共有多少条回复
              itemLayout="horizontal" //横向，水平
              dataSource={this.props.pageData} //总数据
              renderItem={item => (
                <li>
                  <Comment
                    author={item.title}  //姓名
                    avatar={item.cover}  //头像
                    content={item.summary}  //内容
                    datetime={item.publishAt}  //几天前发布
                  />
                </li>
              )}
            />
            {/* 分页 */}
            <div className="paging">
              <Pagination onChange={this.setTable.bind(this)} defaultCurrent={2} total={this.props.data.length} pageSize={3} />
            </div>
          </div>

          {/* 推荐阅读 */}
          <div className="recommended">
            <p>推荐阅读</p>
            <div className='readWrap'>
              <ul>
                {
                  this.props.data.map((item: Items, index: number) => {
                    return <li key={index}>
                      <dl>
                        <dd>
                          <span onClick={this.goDetail.bind(this, item)}>{item.title}</span>
                          <span>大约在{item.publishAt}</span>
                        </dd>
                        <dd>{item.summary}</dd>
                        <dd>
                          <span>赞{item.likes}</span>
                          <span>阅读量{item.views}</span>
                          <span>分享</span>
                        </dd>
                        <dt>
                          <img src={item.cover} alt="" />
                        </dt>
                      </dl>
                    </li>
                  })
                }
              </ul>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapState = (state: any) => {
  return {
    ...state
  }
}
export default connect(
  mapState,
  (dispatch: Dispatch) => bindActionCreators(action, dispatch)
)(index)